<template>
	<view class="bigbox">
		<image src="../../static/logo.png"></image>
		<view class="box">
			<!-- 4.通过点击登录页面的【用户注册】按钮进入到注册页面。页面
		中输入项包含账号、姓名、手机号、邮箱、密码和确认密码；每个输
		入框都具有左侧图标和圆角。 -->
			<view class="icon-input">
				<image src="../../static/logo.png" class="icon"></image>
				<input type="text" value="" placeholder="账号" v-model="account" />
			</view>
			<view class="icon-input">
				<image src="../../static/logo.png" class="icon"></image>
				<input type="text" value="" placeholder="姓名" v-model="name" />
			</view>
			<view class="icon-input">
				<image src="../../static/logo.png" class="icon"></image>
				<input type="text" value="" placeholder="手机号" v-model="phone" />
			</view>
			<view class="icon-input">
				<image src="../../static/logo.png" class="icon"></image>
				<input type="text" value="" placeholder="邮箱" v-model="email" />
			</view>
			<view class="icon-input">
				<image src="../../static/logo.png" class="icon"></image>
				<input type="text" value="" placeholder="密码" password="true" v-model="pwd" />
			</view>
			<view class="icon-input">
				<image src="../../static/logo.png" class="icon"></image>
				<input type="text" value="" placeholder="确认密码" password="true" v-model="comfirmPwd" />
			</view>
			<button type="primary" @click="onReg()">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				name: '',
				phone: '',
				email: '',
				pwd: '',
				comfirmPwd: ''
			}
		},
		methods: {
			// 5.各输入项不能为空，且满足如下校验规则：账号只能输入字母
			// 或数字；姓名只能输入字母或数字，输入不能超过12位；手机号必须
			// 合法(13/15/17/18开头的11位手机号); 邮箱必须合法（例如
			// xx@xx.xx）；密码为6-10位，且只能输入字母或数字；确认密码输入
			// 内容需要和密码一致。
			onReg() {
				if (!(this.account &&
						this.name &&
						this.phone &&
						this.email &&
						this.pwd &&
						this.comfirmPwd
					)) {
					return uni.showToast({
						title: '请填写全部字段',
						icon: 'error'
					})
				}
				if (this.pwd == this.comfirmPwd) {
					return uni.showToast({
						title: '账号密码不一致'
					})
				}
				// 6.点击【提交】按钮后判断输入项是否满足要求，不满足提示对
				// 应错误；输入项满足后请求API，注册成功后跳转到登录页面，注册
				// 失败后根据API返回的失败内容进行友好提示。

				uni.showToast({
					title: '注册成功'
				})
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}

	.bigbox {
		padding: 30rpx 60rpx;

	}

	.bigbox>image {
		margin-top: 80rpx;
		width: 240rpx;
		height: 240rpx;
		margin-left: 190rpx;
		margin-bottom: 30rpx;
	}
	.box{
		background-color: #FFFFFF;
		box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
		border-radius: 12rpx;
		padding: 35rpx;
	}
	.icon-input {
		line-height: 90rpx;
		height: 90rpx;
		margin-bottom: 35rpx;
		display: flex;
		border-bottom: 3rpx solid #C0C0C0;
		background-color: #FFFFFF;
		
	}

	.icon-input>.icon {
		height: 90rpx;
		width: 90rpx;
	}

	.icon-input>input {
		flex: 1;
		line-height: 90rpx;
		height: 90rpx;
	}
</style>
